import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

const WeChaOfficialAccountContent: React.FC = () => {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const topicRef = useRef<HTMLDivElement>(null);
  const keywordsRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const submitRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成公众号文案的模拟函数
  const generateContent = (topic: string, keywords: string, style: string): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = `# ${topic}\n\n`;
    result += `这是一篇关于${topic}的公众号文案。`;
    if (keywords) {
      result += ` 关键词包括：${keywords}。`;
    }
    result += `\n\n根据${style}风格，我们精心撰写了以下内容：\n\n`;

    // 模拟生成的段落
    result += "在当今快节奏的生活中，我们常常被各种信息所包围，却很难找到真正有价值的内容。今天，我们将深入探讨这个话题，为您带来独特的见解和实用的建议。\n\n";
    result += "首先，让我们来了解一下这个话题的背景和重要性。随着社会的发展，这个问题已经越来越受到人们的关注...\n\n";
    result += "接下来，我们将分享一些实用的方法和技巧，帮助您更好地应对这些挑战...\n\n";
    result += "最后，我们希望这篇文章能够为您提供一些启发和帮助。如果您有任何想法或建议，欢迎在评论区留言讨论。\n\n";
    result += "感谢您的阅读！如果喜欢这篇文章，请分享给您的朋友和同事，让更多人受益。\n\n";
    result += "# 结语\n\n让我们一起成长，共同进步！\n\n`【免责声明】本文内容仅供参考，不构成任何投资建议。`";
    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { topic, keywords, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const content = generateContent(topic, keywords, style);
      setGeneratedContent(content);
      message.success('公众号文案生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '公众号文案.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 定义引导步骤
  const tourSteps = [
    {
      key: 'topic',
      title: '输入文案主题',
      description: '请输入公众号文案的主题',
    },
    {
      key: 'keywords',
      title: '输入关键词（可选）',
      description: '请输入相关关键词，多个关键词用逗号分隔',
    },
    {
      key: 'style',
      title: '选择写作风格',
      description: '选择您想要的文案风格，如专业严谨、亲切自然等',
    },
    {
      key: 'submit',
      title: '生成公众号文案',
      description: '点击按钮生成符合公众号平台的文案',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的文案',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    topic: topicRef,
    keywords: keywordsRef,
    style: styleRef,
    submit: submitRef,
    result: resultRef,
  };

  // 风格选项
  const styleOptions = [
    { label: '专业严谨', value: '专业严谨' },
    { label: '亲切自然', value: '亲切自然' },
    { label: '幽默风趣', value: '幽默风趣' },
    { label: '激情澎湃', value: '激情澎湃' },
    { label: '温馨治愈', value: '温馨治愈' },
    { label: '科技感', value: '科技感' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ marginBottom: 24 }}>
          <Title level={2} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            公众号文案生成
            <TourGuideButton onClick={showTour} />
          </Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              style: '亲切自然',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="topic"
                  label="文案主题"
                  rules={[{ required: true, message: '请输入文案主题' }]}
                >
                  <div ref={topicRef}>
                    <Input placeholder="请输入公众号文案的主题" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="keywords"
                  label="关键词"
                >
                  <div ref={keywordsRef}>
                    <Input placeholder="请输入相关关键词，用逗号分隔" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="style"
                  label="写作风格"
                  rules={[{ required: true, message: '请选择写作风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择写作风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={submitRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成公众号文案'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
};
export default WeChaOfficialAccountContent;